<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 修正Thymeleaf链接表达式的写法 -->
    <link href="../static/css/login.css" th:href="@{/css/login.css}"  rel="stylesheet"/>
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="form-box">
        <!-- 修正表单action属性中Thymeleaf表达式的写法 -->
        <form  class="register-box"  th:action="@{/register}" method="post" onsubmit="return dosubmit(this)">
            <h1>register</h1>
            <span class="outer">
                <i class="iconfont user" >&#xe629;</i>
                <input type="text" placeholder="用户名" class="input_txt1" name="username" th:value="${session.registerUsername} ?: ''">
                <span id="resultUser"></span>
            </span><br>
            <span style="margin-top: 20px;">
                <i class="iconfont email" >&#xe63e;</i>
                <input type="text" placeholder="邮箱" class="input_txt" name="email" th:value="${session.registerEmail} ?: ''">
                <span id="resultEmail0"> </span>
            </span><br>

            <span class="code-outer" style="margin-top: 20px;">
                <i class="iconfont">&#xe609;</i>
                <input type="text" placeholder="验证码" class="input_code" name="code" th:value="${session.registerCode} ?: ''">
                <button class="get-code" id="get-code" style="width: 96px;" onclick="sendCode(this.form.email.value,this)" type="button">获取验证码</button>
                <span > </span>
            </span><br>
            <span class="password" style="margin-top: 5px;">
                <i class="iconfont">&#xe69e;</i>
                <input type="password" placeholder="密码" class="input_password" name="password" th:value="${session.registerPassword} ?: ''">
                <span id="resultPassword0"> </span>
                <div class="openEyes1 iconfont" >&#xebcc;</div>
                <div class="closeEyes1 iconfont">&#xebcd;</div>
            </span><br>


            <span class="password-again" style="margin-top: 20px;">
                <i class="iconfont">&#xe69f;</i>
                <input type="password" placeholder="请再次输入密码" class="input_password-again" >
                <span id="resultPasswordAgain"> </span>
                <div class=" iconfont openEyes2">&#xebcc;</div>
                <div class=" iconfont closeEyes2">&#xebcd;</div>
            </span><br>
            <button class="registerButton" style="    margin-top: 18px;">注册</button>
        </form>

    </div>
    <div class="con-box left">
        <h2>探寻<span>慧问</span>之新旅</h2>
        <p>快来入驻<span>慧问</span>畅聊趣事吧</p>
        <img th:src="@{/img/name.png}" alt="">
        <p>已有账号</p>
        <button id="login">向左滑</button>
    </div>
    <div class="con-box right">
        <h2>探寻<span>慧问</span>之新程</h2>
        <p>快来入驻<span>慧问</span>探索新知吧</p>

        <!-- 修正Thymeleaf表达式中的括号为半角括号 -->
        <img th:src="@{/img/logo.png}" alt="logo">

        <p>已有账号?</p>
        <button class="go-to-login">去登录</button>
    </div>

    <div class="bookOuter">
        <img th:src="@{/img/书(Book)_爱给网_aigei_com.gif}" alt="书" class="book">
    </div>

</div>
<!--<div id="customAlert" >-->
<!--    <p id="alertMessage" th:text="${result}"></p>-->
<!--</div>-->




<script th:inline="javascript">
    let errorMessage = [[${errorMessage}]];
    let result = [[${result}]];
    let go_to_login=document.getElementsByClassName('go-to-login')
    for(let i=0;i<go_to_login.length;i++){
        go_to_login[i].addEventListener('click',()=>{
            window.location.href = "http://localhost:8080/login";
        })
    }
    function clearSessionData() {
        $.ajax({
            url: "/login/deleteSession",      // 后端接口路径
            method: "POST",             // 对应后端的 @PostMapping
            success: function(response) {
                console.log("Session 数据已清除");
                console.log(response)
            },
            error: function(error) {
                console.error("清除 Session 失败:", error);

            }
        });
    }
    clearSessionData()

</script>
</body>
<script src="../static/js/register.js" th:src="@{/js/register.js}"></script>
</html>